<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String username = "";
	String password = "";
	Cookie[] cookies = request.getCookies();
	if(cookies != null){
		for(Cookie c:cookies){
			if("uname".equals(c.getName())){
				username = c.getValue();
			}
			
			if("upwd".equals(c.getName())){
				password = c.getValue();
			}
		}
	}
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购 - 登录/注册</title>
    <style>
        * {
           list-style: none;
           margin: 0;
           padding: 0; 
           text-decoration: none;
           box-sizing: border-box;
           font-family: 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary-color: rgb(80, 215, 185);
            --secondary-color: rgb(253, 190, 61);
            --dark-color: rgb(55, 68, 77);
            --error-color: #ff4757;
            --success-color: #2ed573;
        }
        
        body {
            background-image: url('image/backgroundImg.jpeg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        #box {
            width: 100%;
            max-width: 900px;
            min-height: 600px;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
            overflow: hidden;
        }
        
        #login {
            flex: 1;
            min-width: 400px;
            background-color: var(--primary-color);
            padding: 30px;
            display: flex;
            flex-direction: column;
            z-index: 2;
            border-radius: 20px 0 0 20px;
        }
        
        #logoDiv {
            width: 100%;
            height: 180px;
            background-color: var(--secondary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            margin-bottom: 20px;
        }
        
        #logoDiv>img {
            height: 80%;
            max-width: 80%;
            object-fit: contain;
        }
        
        .form-group {
            margin-bottom: 20px;
            width: 100%;
        }
        
        .form-input {
            border: none;
            width: 100%;
            height: 45px;
            border-radius: 22px;
            padding: 0 20px;
            outline: none;
            font-size: 15px;
            background: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .error-msg {
            font-size: 13px;
            color: var(--error-color);
            display: block;
            margin-top: 5px;
            min-height: 18px;
        }
        
        .success-msg {
            font-size: 13px;
            color: var(--success-color);
            display: block;
            margin-top: 5px;
            min-height: 18px;
        }
        
        .checkbox-container {
            display: flex;
            align-items: center;
            margin: 15px 0;
            color: rgb(49, 79, 71);
            font-size: 15px;
        }
        
        .checkbox-container input {
            margin-right: 8px;
        }
        
        .btn {
            display: block;
            font-size: 16px;
            margin: 15px auto;
            width: 80%;
            height: 45px;
            border-radius: 22px;
            border: none;
            color: rgb(49, 79, 71);
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: var(--secondary-color);
        }
        
        .btn-primary:hover {
            background-color: rgb(245, 175, 40);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn-secondary {
            background-color: rgb(252, 94, 95);
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: rgb(240, 80, 80);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .form-link {
            text-align: center;
            display: block;
            color: rgb(49, 79, 71);
            margin: 10px 0;
            cursor: pointer;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .form-link:hover {
            color: var(--dark-color);
            text-decoration: underline;
        }
        
        #register {
            flex: 1;
            min-width: 400px;
            background-color: white;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            border-radius: 0 20px 20px 0;
        }
        
        .form-title {
            font-size: 28px;
            text-align: center;
            margin-bottom: 30px;
            color: var(--dark-color);
            font-weight: bold;
        }
        
        #goback {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
            display: inline-block;
            height: 40px;
            padding: 0 20px;
            background-color: white;
            line-height: 40px;
            text-align: center;
            border-radius: 20px;
            color: var(--dark-color);
            font-weight: 500;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        #goback:hover {
            background-color: var(--dark-color);
            color: white;
            transform: translateY(-2px);
        }
        
        /* 响应式设计 */
        @media (max-width: 900px) {
            #box {
                flex-direction: column;
                max-width: 400px;
            }
            
            #login, #register {
                min-width: 100%;
                border-radius: 20px;
            }
            
            #register {
                display: none;
                padding: 30px;
            }
            
            #register.active {
                display: flex;
            }
            
            #login.hidden {
                display: none;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.5s ease forwards;
        }
    </style>
</head>
<body>
    <a href="index.jsp" id="goback">返回主页</a>
    
    <div id="box">
        <div id="login" class="animate-fade">
            <div id="logoDiv">
                <img src="image/loginLogo.png" alt="乐购Logo">
            </div>
            <form id="loginForm" action="login.do" method="POST">
                <div class="form-group">
                    <input type="text" class="form-input" id="uName" name="uName" placeholder="请输入账号" value="<%=username%>" required>
                </div>
                
                <div class="form-group">
                    <input type="password" class="form-input" id="uPwd" name="uPwd" placeholder="请输入密码" value="<%=password%>" required>
                    <span class="error-msg">${msg}</span>
                </div>
                
                <div class="checkbox-container">
                    <input type="checkbox" id="autoSave" name="autoSave">
                    <label for="autoSave">记住账号</label>
                </div>
                
                <button type="submit" class="btn btn-primary">登录</button>
                
                <span class="form-link" id="goRegister">没有账号？点我注册</span>
            </form>
        </div>
        
        <div id="register">
            <span class="form-title">欢迎注册乐购</span>
            
            <form id="registerForm" action="register.do" method="POST">
                <div class="form-group">
                    <input type="text" class="form-input" id="rirUname" placeholder="请输入账号" name="userName" required>
                    <span class="error-msg" id="usernameError">${uName}</span>
                </div>
                
                <div class="form-group">
                    <input type="password" class="form-input" id="rirUpwd" placeholder="请输入密码" name="password" required>
                    <span class="error-msg" id="passwordError"></span>
                </div>
                
                <div class="form-group">
                    <input type="password" class="form-input" id="reRirUpwd" placeholder="请再次输入密码" name="rePassword" required>
                    <span class="error-msg" id="rePasswordError">${passwordE}</span>
                </div>
                
                <div class="form-group">
                    <input type="tel" class="form-input" id="phone" placeholder="请输入您的手机号" name="phoneNum" required>
                    <span class="error-msg" id="phoneError"></span>
                </div>
                
                <button type="submit" class="btn btn-secondary">注册</button>
                
                <span class="form-link" id="goLogin">已有账号？点我登录</span>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 响应式设计 - 移动端切换表单
            if ($(window).width() <= 900) {
                $("#goRegister").click(function() {
                    $("#login").addClass("hidden");
                    $("#register").addClass("active animate-fade");
                });
                
                $("#goLogin").click(function() {
                    $("#register").removeClass("active animate-fade");
                    $("#login").removeClass("hidden").addClass("animate-fade");
                });
            } else {
                // 桌面端动画效果
                $("#goRegister").click(function() {
                    $("#box").animate({width: "800px"}, 500);
                    $("#register").css("display", "flex").hide().fadeIn(600);
                });
                
                $("#goLogin").click(function() {
                    $("#box").animate({width: "400px"}, 500);
                    $("#register").fadeOut(400);
                });
            }
            
            // 用户名验证
            $("#rirUname").on("blur", function() {
                var username = $(this).val().trim();
                var errorElement = $("#usernameError");
                
                if (username === "") {
                    errorElement.text("用户名不能为空");
                    return;
                }
                
                if (username.length < 4) {
                    errorElement.text("用户名长度不能少于4位");
                    return;
                }
                
                // 检查用户名是否已存在
                $.ajax({
                    url: "CheckUsername",
                    type: "POST",
                    data: { userName: username },
                    success: function(response) {
                        if (response.exists) {
                            errorElement.text("用户名已存在");
                        } else {
                            errorElement.text("").addClass("success-msg").text("用户名可用");
                        }
                    },
                    error: function() {
                        errorElement.text("验证失败，请重试");
                    }
                });
            });
            
            // 密码验证
            $("#rirUpwd").on("blur", function() {
                var password = $(this).val();
                var errorElement = $("#passwordError");
                
                if (password.length < 6) {
                    errorElement.text("密码长度不能少于6位");
                } else {
                    errorElement.text("");
                }
            });
            
            // 确认密码验证
            $("#reRirUpwd").on("blur", function() {
                var password = $("#rirUpwd").val();
                var confirmPassword = $(this).val();
                var errorElement = $("#rePasswordError");
                
                if (password !== confirmPassword) {
                    errorElement.text("两次密码输入不一致");
                } else {
                    errorElement.text("");
                }
            });
            
            // 手机号验证
            $("#phone").on("blur", function() {
                var phone = $(this).val().trim();
                var phoneRegex = /^1[3-9]\d{9}$/;
                var errorElement = $("#phoneError");
                
                if (!phoneRegex.test(phone)) {
                    errorElement.text("请输入有效的手机号码");
                } else {
                    errorElement.text("");
                }
            });
            
            // 表单提交前的最终验证
            $("#registerForm").on("submit", function(e) {
                // 重置所有错误信息
                $(".error-msg").text("");
                
                var isValid = true;
                var username = $("#rirUname").val().trim();
                var password = $("#rirUpwd").val();
                var confirmPassword = $("#reRirUpwd").val();
                var phone = $("#phone").val().trim();
                
                // 验证用户名
                if (username === "" || username.length < 4) {
                    $("#usernameError").text("用户名无效");
                    isValid = false;
                }
                
                // 验证密码
                if (password.length < 6) {
                    $("#passwordError").text("密码长度不能少于6位");
                    isValid = false;
                }
                
                // 验证确认密码
                if (password !== confirmPassword) {
                    $("#rePasswordError").text("两次密码输入不一致");
                    isValid = false;
                }
                
                // 验证手机号
                var phoneRegex = /^1[3-9]\d{9}$/;
                if (!phoneRegex.test(phone)) {
                    $("#phoneError").text("请输入有效的手机号码");
                    isValid = false;
                }
                
                if (!isValid) {
                    e.preventDefault();
                    // 添加抖动效果提示错误
                    $(".form-input").each(function() {
                        if ($(this).next(".error-msg").text() !== "") {
                            $(this).addClass("error");
                            setTimeout(function() {
                                $(this).removeClass("error");
                            }.bind(this), 1000);
                        }
                    });
                }
            });
            
            // 登录表单验证
            $("#loginForm").on("submit", function(e) {
                var username = $("#uName").val().trim();
                var password = $("#uPwd").val();
                
                if (username === "" || password === "") {
                    e.preventDefault();
                    $("#uName, #uPwd").addClass("error");
                    setTimeout(function() {
                        $("#uName, #uPwd").removeClass("error");
                    }, 1000);
                    
                    if (username === "") {
                        $("#uName").next(".error-msg").text("请输入用户名");
                    }
                    
                    if (password === "") {
                        $("#uPwd").next(".error-msg").text("请输入密码");
                    }
                }
            });
            
            // 输入时移除错误状态
            $(".form-input").on("input", function() {
                $(this).removeClass("error");
                $(this).next(".error-msg").text("");
            });
        });
    </script>
</body>
</html>